<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--favicon-->

  <!--plugins-->
  <link href="css/simplebar.css" rel="stylesheet">
  <link href="css/perfect-scrollbar.css" rel="stylesheet">
  <link href="css/metisMenu.min.css" rel="stylesheet">
  <link href="css/dataTables.bootstrap5.min.css" rel="stylesheet">
  <!-- loader-->
  <link href="css/pace.min.css" rel="stylesheet">
  <script src="js/pace.min.js"></script>
  <!-- Bootstrap CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/css2.css" rel="stylesheet">
  <link href="css/app.css" rel="stylesheet">
  <link href="css/icons.css" rel="stylesheet">
  <!-- Theme Style CSS -->
  <link rel="stylesheet" href="/css/dark-theme.css">
  <link rel="stylesheet" href="/css/semi-dark.css">
  <link rel="stylesheet" href="/css/header-colors.css">
  <!--layui-css-->
  <link href="layui/css/layui.css" rel="stylesheet">
  <!--icon-->
  <script src="icon/excel/iconfont.js"></script>

  <title>榆园财务管理系统</title>

  <style>
    th {
      text-align: center;
    }

    td {
      text-align: center;
    }

    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
  </style>
</head>

<body>
<!--wrapper-->
<div class="wrapper">
  <!--sidebar wrapper -->
  <div class="sidebar-wrapper" data-simplebar="true">
    <div class="sidebar-header">
      <div>
        <img src="/picture/logo-icon.png" class="logo-icon" alt="logo icon">
      </div>
      <div>
        <h4 class="logo-text">榆园财务系统</h4>
      </div>
      <div class="toggle-icon ms-auto"><i class='bx bx-arrow-to-left'></i>
      </div>
    </div>
    <!--navigation-->
    <ul class="metismenu" id="menu">
      <li class="menu-label">数据展示</li>
      <li>
        <a href="javascript:;" class="has-arrow">
          <div class="parent-icon"><i class='lni lni-graph'></i>
          </div>
          <div class="menu-title">数据大屏</div>
        </a>
        <ul>
          <li><a href="#"><i class="bx bx-chalkboard"></i>大屏1</a>
          </li>
          <li><a href="index2.html"><i class="bx bx-chalkboard"></i>大屏2</a>
          </li>
        </ul>
      </li>
      <li class="menu-label">数据汇总</li>
      <li>
        <a href="javascript:;" class="has-arrow">
          <div class="parent-icon"><i class="bx bx-abacus"></i>
          </div>
          <div class="menu-title">利润分析</div>
        </a>
        <ul>
          <li><a href="app-emailbox.html"><i class="bx bxs-dollar-circle"></i>利润分析</a>
          </li>
          <li><a href="app-chat-box.html"><i class="bx bxs-store"></i>按店对比</a>
          </li>
          <li><a href="app-file-manager.html"><i class="bx bxs-category"></i>按科目对比</a>
          </li>
        </ul>
      </li>
      <li class="menu-label">分项明细</li>
      <li>
        <a href="javascript:;" class="has-arrow">
          <div class="parent-icon"><i class="bx bx-category"></i>
          </div>
          <div class="menu-title">分项明细</div>
        </a>
        <ul>
          <li><a href="component-alerts.html"><i class="bx bxs-tree"></i>成本销售</a>
          </li>
          <li><a href="component-accordions.html"><i class="bx bxs-badge-dollar"></i>财务费用</a>
          </li>
          <li><a href="app-file-manager.html"><i class="bx bxs-store"></i>店铺运营</a>
          </li>
          <li><a href="app-contact-list.html"><i class="bx bxs-spreadsheet"></i>销售统计</a>
          </li>
          <li><a href="app-to-do.html"><i class="bx bxs-archive-out"></i>店铺打款</a>
          </li>
          <li><a href="app-invoice.html"><i class="bx bxs-car-mechanic"></i>快递费用</a>
          </li>
          <li><a href="app-fullcalender.html"><i class="bx bxs-briefcase-alt"></i>包材费用</a>
          </li>
        </ul>
      </li>
      <li class="menu-label">数据管理</li>
      <li>
        <a href="javascript:;" class="has-arrow">
          <div class="parent-icon"><i class='bx bx-data'></i>
          </div>
          <div class="menu-title">数据导入</div>
        </a>
        <ul>
          <li><a href="ecommerce-products.html"><i class="bx bxs-file-import"></i>数据导入</a>
          </li>
          <li><a href="/cost/addcorecost.html"><i class="bx bxs-comment-add"></i>手动添加</a>
          </li>
        </ul>
      </li>
      <li>
        <a class="has-arrow" href="javascript:;">
          <div class="parent-icon"><i class='bx bx-calculator'></i>
          </div>
          <div class="menu-title">数据校验</div>
        </a>
        <ul>
          <li><a href="component-alerts.html"><i class="bx bxs-tree"></i>成本销售</a>
          </li>
          <li><a href="component-accordions.html"><i class="bx bxs-badge-dollar"></i>财务费用</a>
          </li>
          <li><a href="app-file-manager.html"><i class="bx bxs-store"></i>店铺运营</a>
          </li>
          <li><a href="app-contact-list.html"><i class="bx bxs-spreadsheet"></i>销售统计</a>
          </li>
          <li><a href="app-to-do.html"><i class="bx bxs-archive-out"></i>店铺打款</a>
          </li>
          <li><a href="app-invoice.html"><i class="bx bxs-car-mechanic"></i>快递费用</a>
          </li>
          <li><a href="app-fullcalender.html"><i class="bx bxs-briefcase-alt"></i>包材费用</a>
          </li>
        </ul>
      </li>
      <li class="menu-label">系统设置</li>
      <li>
        <a class="has-arrow" href="javascript:;">
          <div class="parent-icon"><i class='bx bx-archive'></i>
          </div>
          <div class="menu-title">企业信息</div>
        </a>
        <ul>
          <li><a href="/company.html"><i class="bx bxs-factory"></i>企业信息</a>
          </li>
          <li><a href="/buyprice.html.html"><i class="bx bxs-store"></i>店铺信息</a>
          </li>
          <li><a href="storelist.html"><i class="bx bxs-building-house"></i>货仓信息</a>
          </li>
        </ul>
      </li>
      <li>
        <a class="has-arrow" href="javascript:;">
          <div class="parent-icon"><i class="bx bx-money"></i>
          </div>
          <div class="menu-title">财务信息</div>
        </a>
        <ul>
          <li><a href="/files/filelist.html"><i class="bx bxs-category"></i>文件清单</a>
          </li>
          <li><a href="table-basic-table.html"><i class="bx bxs-file"></i>费用流水</a>
          </li>
          <li><a href="subject.html"><i class="bx bxs-book"></i>科目信息</a>
          </li>
          <li><a href="table-datatable.html"><i class="bx bxs-baby-carriage"></i>物流运费</a>
          </li>
          <li><a href="table-datatable.html"><i class="bx bxs-package"></i>包材费用</a>
          </li>
          <li><a href="table-datatable.html"><i class="bx bxs-magic-wand"></i>操作费用</a>
          </li>
          <li><a href="table-datatable.html"><i class="bx bxs-cart"></i>采购价格</a>
          </li>
        </ul>
      </li>
      <li class="menu-label">用户设置</li>
      <li>
        <a class="has-arrow" href="javascript:;">
          <div class="parent-icon"><i class='bx bx-user-check'></i>
          </div>
          <div class="menu-title">用户信息</div>
        </a>
        <ul>
          <li><a href="/user.html"><i class="bx bxs-user"></i>信息修改</a>
          </li>
          <li><a href="form-input-group.html"><i class="bx bxs-key"></i>设置密码</a>
          </li>
        </ul>
      </li>
    </ul>
    <!--end navigation-->
  </div>


  <!--end sidebar wrapper -->
  <!--start header -->

  <!-- display=none 直接注释掉会使js报错-->
  <header>
    <div class="topbar d-flex align-items-center">
      <nav class="navbar navbar-expand" style="display: none;">
        <div class="mobile-toggle-menu"><i class='bx bx-menu'></i>
        </div>
        <div class="search-bar flex-grow-1">
          <div class="position-relative search-bar-box">
            <input type="text" class="form-control search-control" placeholder="Type to search..."> <span
                  class="position-absolute top-50 search-show translate-middle-y"><i class='bx bx-search'></i></span>
            <span class="position-absolute top-50 search-close translate-middle-y"><i
                    class='bx bx-x'></i></span>
          </div>
        </div>
        <div class="top-menu ms-auto">
          <ul class="navbar-nav align-items-center">
            <li class="nav-item mobile-search-icon">
              <a class="nav-link" href="#"> <i class='bx bx-search'></i>
              </a>
            </li>
            <li class="nav-item dropdown dropdown-large">
              <a class="nav-link dropdown-toggle dropdown-toggle-nocaret" href="#" role="button"
                 data-bs-toggle="dropdown" aria-expanded="false"> <i class='bx bx-category'></i>
              </a>
              <div class="dropdown-menu dropdown-menu-end">
                <div class="row row-cols-3 g-3 p-3">
                  <div class="col text-center">
                    <div class="app-box mx-auto bg-gradient-cosmic text-white"><i
                            class='bx bx-group'></i>
                    </div>
                    <div class="app-title">Teams</div>
                  </div>
                  <div class="col text-center">
                    <div class="app-box mx-auto bg-gradient-burning text-white"><i
                            class='bx bx-atom'></i>
                    </div>
                    <div class="app-title">Projects</div>
                  </div>
                  <div class="col text-center">
                    <div class="app-box mx-auto bg-gradient-lush text-white"><i
                            class='bx bx-shield'></i>
                    </div>
                    <div class="app-title">Tasks</div>
                  </div>
                  <div class="col text-center">
                    <div class="app-box mx-auto bg-gradient-kyoto text-dark"><i
                            class='bx bx-notification'></i>
                    </div>
                    <div class="app-title">Feeds</div>
                  </div>
                  <div class="col text-center">
                    <div class="app-box mx-auto bg-gradient-blues text-dark"><i
                            class='bx bx-file'></i>
                    </div>
                    <div class="app-title">Files</div>
                  </div>
                  <div class="col text-center">
                    <div class="app-box mx-auto bg-gradient-moonlit text-white"><i
                            class='bx bx-filter-alt'></i>
                    </div>
                    <div class="app-title">Alerts</div>
                  </div>
                </div>
              </div>
            </li>
            <li class="nav-item dropdown dropdown-large">
              <a class="nav-link dropdown-toggle dropdown-toggle-nocaret position-relative" href="#"
                 role="button" data-bs-toggle="dropdown" aria-expanded="false"> <span class="alert-count">7</span>
                <i class='bx bx-bell'></i>
              </a>
              <div class="dropdown-menu dropdown-menu-end">
                <a href="javascript:;">
                  <div class="msg-header">
                    <p class="msg-header-title">Notifications</p>
                    <p class="msg-header-clear ms-auto">Marks all as read</p>
                  </div>
                </a>
                <div class="header-notifications-list">
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex align-items-center">
                      <div class="notify bg-light-primary text-primary"><i
                              class="bx bx-group"></i>
                      </div>
                      <div class="flex-grow-1">
                        <h6 class="msg-name">New Customers<span class="msg-time float-end">14 Sec
												ago</span></h6>
                        <p class="msg-info">5 new user registered</p>
                      </div>
                    </div>
                  </a>
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex align-items-center">
                      <div class="notify bg-light-danger text-danger"><i
                              class="bx bx-cart-alt"></i>
                      </div>
                      <div class="flex-grow-1">
                        <h6 class="msg-name">New Orders <span class="msg-time float-end">2 min
												ago</span></h6>
                        <p class="msg-info">You have recived new orders</p>
                      </div>
                    </div>
                  </a>
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex align-items-center">
                      <div class="notify bg-light-success text-success"><i class="bx bx-file"></i>
                      </div>
                      <div class="flex-grow-1">
                        <h6 class="msg-name">24 PDF File<span class="msg-time float-end">19 min
												ago</span></h6>
                        <p class="msg-info">The pdf files generated</p>
                      </div>
                    </div>
                  </a>
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex align-items-center">
                      <div class="notify bg-light-warning text-warning"><i class="bx bx-send"></i>
                      </div>
                      <div class="flex-grow-1">
                        <h6 class="msg-name">Time Response <span class="msg-time float-end">28 min
												ago</span></h6>
                        <p class="msg-info">5.1 min avarage time response</p>
                      </div>
                    </div>
                  </a>
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex align-items-center">
                      <div class="notify bg-light-info text-info"><i
                              class="bx bx-home-circle"></i>
                      </div>
                      <div class="flex-grow-1">
                        <h6 class="msg-name">New Product Approved <span
                                class="msg-time float-end">2 hrs ago</span></h6>
                        <p class="msg-info">Your new product has approved</p>
                      </div>
                    </div>
                  </a>
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex align-items-center">
                      <div class="notify bg-light-danger text-danger"><i
                              class="bx bx-message-detail"></i>
                      </div>
                      <div class="flex-grow-1">
                        <h6 class="msg-name">New Comments <span class="msg-time float-end">4 hrs
												ago</span></h6>
                        <p class="msg-info">New customer comments recived</p>
                      </div>
                    </div>
                  </a>
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex align-items-center">
                      <div class="notify bg-light-success text-success"><i
                              class='bx bx-check-square'></i>
                      </div>
                      <div class="flex-grow-1">
                        <h6 class="msg-name">Your item is shipped <span
                                class="msg-time float-end">5 hrs
												ago</span></h6>
                        <p class="msg-info">Successfully shipped your item</p>
                      </div>
                    </div>
                  </a>
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex align-items-center">
                      <div class="notify bg-light-primary text-primary"><i
                              class='bx bx-user-pin'></i>
                      </div>
                      <div class="flex-grow-1">
                        <h6 class="msg-name">New 24 authors<span class="msg-time float-end">1 day
												ago</span></h6>
                        <p class="msg-info">24 new authors joined last week</p>
                      </div>
                    </div>
                  </a>
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex align-items-center">
                      <div class="notify bg-light-warning text-warning"><i
                              class='bx bx-door-open'></i>
                      </div>
                      <div class="flex-grow-1">
                        <h6 class="msg-name">Defense Alerts <span class="msg-time float-end">2 weeks
												ago</span></h6>
                        <p class="msg-info">45% less alerts last 4 weeks</p>
                      </div>
                    </div>
                  </a>
                </div>
                <a href="javascript:;">
                  <div class="text-center msg-footer">View All Notifications</div>
                </a>
              </div>
            </li>
            <li class="nav-item dropdown dropdown-large">
              <a class="nav-link dropdown-toggle dropdown-toggle-nocaret position-relative" href="#"
                 role="button" data-bs-toggle="dropdown" aria-expanded="false"> <span class="alert-count">8</span>
                <i class='bx bx-comment'></i>
              </a>
              <div class="dropdown-menu dropdown-menu-end">
                <a href="javascript:;">
                  <div class="msg-header">
                    <p class="msg-header-title">Messages</p>
                    <p class="msg-header-clear ms-auto">Marks all as read</p>
                  </div>
                </a>
                <div class="header-message-list">
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex align-items-center">
                      <div class="user-online">
                        <img src="/picture/avatar-1.png" class="msg-avatar" alt="user avatar">
                      </div>
                      <div class="flex-grow-1">
                        <h6 class="msg-name">Daisy Anderson <span class="msg-time float-end">5 sec
												ago</span></h6>
                        <p class="msg-info">The standard chunk of lorem</p>
                      </div>
                    </div>
                  </a>
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex align-items-center">
                      <div class="user-online">
                        <img src="/picture/avatar-2.png" class="msg-avatar" alt="user avatar">
                      </div>
                      <div class="flex-grow-1">
                        <h6 class="msg-name">Althea Cabardo <span class="msg-time float-end">14
												sec ago</span></h6>
                        <p class="msg-info">Many desktop publishing packages</p>
                      </div>
                    </div>
                  </a>
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex align-items-center">
                      <div class="user-online">
                        <img src="/picture/avatar-3.png" class="msg-avatar" alt="user avatar">
                      </div>
                      <div class="flex-grow-1">
                        <h6 class="msg-name">Oscar Garner <span class="msg-time float-end">8 min
												ago</span></h6>
                        <p class="msg-info">Various versions have evolved over</p>
                      </div>
                    </div>
                  </a>
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex align-items-center">
                      <div class="user-online">
                        <img src="/picture/avatar-4.png" class="msg-avatar" alt="user avatar">
                      </div>
                      <div class="flex-grow-1">
                        <h6 class="msg-name">Katherine Pechon <span class="msg-time float-end">15
												min ago</span></h6>
                        <p class="msg-info">Making this the first true generator</p>
                      </div>
                    </div>
                  </a>
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex align-items-center">
                      <div class="user-online">
                        <img src="/picture/avatar-5.png" class="msg-avatar" alt="user avatar">
                      </div>
                      <div class="flex-grow-1">
                        <h6 class="msg-name">Amelia Doe <span class="msg-time float-end">22 min
												ago</span></h6>
                        <p class="msg-info">Duis aute irure dolor in reprehenderit</p>
                      </div>
                    </div>
                  </a>
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex align-items-center">
                      <div class="user-online">
                        <img src="/picture/avatar-6.png" class="msg-avatar" alt="user avatar">
                      </div>
                      <div class="flex-grow-1">
                        <h6 class="msg-name">Cristina Jhons <span class="msg-time float-end">2 hrs
												ago</span></h6>
                        <p class="msg-info">The passage is attributed to an unknown</p>
                      </div>
                    </div>
                  </a>
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex align-items-center">
                      <div class="user-online">
                        <img src="/picture/avatar-7.png" class="msg-avatar" alt="user avatar">
                      </div>
                      <div class="flex-grow-1">
                        <h6 class="msg-name">James Caviness <span class="msg-time float-end">4 hrs
												ago</span></h6>
                        <p class="msg-info">The point of using Lorem</p>
                      </div>
                    </div>
                  </a>
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex align-items-center">
                      <div class="user-online">
                        <img src="/picture/avatar-8.png" class="msg-avatar" alt="user avatar">
                      </div>
                      <div class="flex-grow-1">
                        <h6 class="msg-name">Peter Costanzo <span class="msg-time float-end">6 hrs
												ago</span></h6>
                        <p class="msg-info">It was popularised in the 1960s</p>
                      </div>
                    </div>
                  </a>
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex align-items-center">
                      <div class="user-online">
                        <img src="/picture/avatar-9.png" class="msg-avatar" alt="user avatar">
                      </div>
                      <div class="flex-grow-1">
                        <h6 class="msg-name">David Buckley <span class="msg-time float-end">2 hrs
												ago</span></h6>
                        <p class="msg-info">Various versions have evolved over</p>
                      </div>
                    </div>
                  </a>
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex align-items-center">
                      <div class="user-online">
                        <img src="/picture/avatar-10.png" class="msg-avatar" alt="user avatar">
                      </div>
                      <div class="flex-grow-1">
                        <h6 class="msg-name">Thomas Wheeler <span class="msg-time float-end">2 days
												ago</span></h6>
                        <p class="msg-info">If you are going to use a passage</p>
                      </div>
                    </div>
                  </a>
                  <a class="dropdown-item" href="javascript:;">
                    <div class="d-flex align-items-center">
                      <div class="user-online">
                        <img src="/picture/avatar-11.png" class="msg-avatar" alt="user avatar">
                      </div>
                      <div class="flex-grow-1">
                        <h6 class="msg-name">Johnny Seitz <span class="msg-time float-end">5 days
												ago</span></h6>
                        <p class="msg-info">All the Lorem Ipsum generators</p>
                      </div>
                    </div>
                  </a>
                </div>
                <a href="javascript:;">
                  <div class="text-center msg-footer">View All Messages</div>
                </a>
              </div>
            </li>
          </ul>
        </div>
        <div class="user-box dropdown">
          <a class="d-flex align-items-center nav-link dropdown-toggle dropdown-toggle-nocaret" href="#"
             role="button" data-bs-toggle="dropdown" aria-expanded="false">
            <img src="/picture/avatar-2.png" class="user-img" alt="user avatar">
            <div class="user-info ps-3">
              <p class="user-name mb-0">Pauline Seitz</p>
              <p class="designattion mb-0">Web Designer</p>
            </div>
          </a>
          <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="javascript:;"><i class="bx bx-user"></i><span>Profile</span></a>
            </li>
            <li><a class="dropdown-item" href="javascript:;"><i class="bx bx-cog"></i><span>Settings</span></a>
            </li>
            <li><a class="dropdown-item" href="javascript:;"><i class='bx bx-home-circle'></i><span>Dashboard</span></a>
            </li>
            <li><a class="dropdown-item" href="javascript:;"><i class='bx bx-dollar-circle'></i><span>Earnings</span></a>
            </li>
            <li><a class="dropdown-item" href="javascript:;"><i
                    class='bx bx-download'></i><span>Downloads</span></a>
            </li>
            <li>
              <div class="dropdown-divider mb-0"></div>
            </li>
            <li><a class="dropdown-item" href="javascript:;"><i class='bx bx-log-out-circle'></i><span>Logout</span></a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </header>
  <!--end header -->

  <!-- 页面 -->
  <!--start page wrapper -->
  <div class="page-wrapper">
    <div class="page-content">
      <!--面包屑-->
      <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
        <div class="breadcrumb-title pe-3">财务信息</div>
        <div class="ps-3">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 p-0">
              <li class="breadcrumb-item"><a href="/index.html"><i class="bx bx-home-alt"></i></a>
              </li>
              <li class="breadcrumb-item active" aria-current="page">采购价格信息</li>
            </ol>
          </nav>
        </div>
      </div>
      <!-- 页面部分 -->
      <div class="card" style="min-height: 778px;">
        <div class="card-body">

          <!--页面切换-->
          <ul class="nav nav-pills mb-3">
            <!--查询-->
            <li>
              <div class="d-lg-flex align-items-center mb-4 gap-3">
                <div class="position-relative">
                  <input id="search-input" type="text" class="form-control ps-5 radius-30"
                         placeholder="查询" onkeyup="search()">
                  <span class="position-absolute top-50 product-show translate-middle-y"><i
                          class="bx bx-search"></i></span>
                </div>
              </div>
            </li>
            <!--添加-->
            <li style="margin-left: 50%">
              <div class="d-lg-flex align-items-center mb-4 gap-3">
                <div class="position-relative">
                  <button type="button" class="layui-btn layui-btn-primary" data-bs-toggle="modal"
                          data-bs-target="#add_div">添加采购信息
                  </button>
                </div>
              </div>
            </li>

            <!--                        &lt;!&ndash;excel导入数据&ndash;&gt;-->
            <!--                        <li style="margin-left: 50px;">-->
            <!--                            <div class="d-lg-flex align-items-center mb-4 gap-3">-->
            <!--                                <div class="position-relative">-->
            <!--                                    <button type="button" class="layui-btn layui-btn-primary" id="excelUpLoad">-->
            <!--                                        <svg class="icon" aria-hidden="true" style="font-size: 20px;">-->
            <!--                                            <use xlink:href="#icon-excel-ext"></use>-->
            <!--                                        </svg>-->
            <!--                                        Excel导入数据-->
            <!--                                    </button>-->
            <!--                                </div>-->
            <!--                            </div>-->
            <!--                        </li>-->
          </ul>
          <!--数据表格-->
          <div class="table-responsive">
            <table class="table table-striped table-bordered" style="width:100%;" id="mytable">
              <thead>
              <tr>
                <th width="100px;">ID</th>
                <th width="200px;">商家编码</th>
                <th width="150px;">变更前价格</th>
                <th width="150px;">变更后价格</th>
                <th width="150px;">变更日期</th>

                <th width="200px;">操作</th>
              </tr>
              </thead>

              <tbody id="buypricefind">

              </tbody>
            </table>
          </div>

          <!--修改页面-->
          <div class="modal fade" id="update_div" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <!--标题-->
                <div class="modal-header">
                  <h5 class="modal-title">修改</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal"
                          aria-label="Close"></button>
                </div>
                <!--表单-->
                <div class="modal-body">
                  <div class="row mb-3">
                    <label for="id" class="col-sm-3 col-form-label"
                           style="text-align: center">ID</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="id" placeholder="ID" disabled>
                    </div>
                  </div>
                  <div class="row mb-3">
                    <label for="code" class="col-sm-3 col-form-label"
                           style="text-align: center">商家编码</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="code" placeholder="商家编码">
                    </div>
                  </div>
                  <div class="row mb-3">
                    <label for="price1" class="col-sm-3 col-form-label"
                           style="text-align: center">变更前价格</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="price1" placeholder="变更前价格">
                    </div>
                  </div>
                  <div class="row mb-3">
                    <label for="price2" class="col-sm-3 col-form-label"
                           style="text-align: center">变更后价格</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="price2" placeholder="变更后价格">
                    </div>
                  </div>
                  <div class="row mb-3">
                    <label for="date" class="col-sm-3 col-form-label"
                           style="text-align: center">变更日期</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="date" placeholder="变更日期">
                    </div>
                  </div>






                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                  <button type="button" class="btn btn-primary" data-bs-dismiss="modal"
                          onclick="update2()">保存修改
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!--添加页面-->
          <div class="modal fade" id="add_div" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <!--标题-->
                <div class="modal-header">
                  <h5 class="modal-title">添加采购价格</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal"
                          aria-label="Close"></button>
                </div>
                <!--表单-->
                <div class="modal-body">
                  <div class="row mb-3">
                    <label for="id" class="col-sm-3 col-form-label"
                           style="text-align: center">id</label>
                    <div class="col-sm-9">
                      <input type="email" class="form-control" id="add1id" placeholder="id" disabled>
                    </div>
                  </div>
                  <div class="row mb-3">
                    <label for="add1code" class="col-sm-3 col-form-label"
                           style="text-align: center">商家编码</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="add1code" placeholder="商家编码">
                    </div>
                  </div>
                  <div class="row mb-3">
                    <label for="add1price1" class="col-sm-3 col-form-label"
                           style="text-align: center">变更前价格</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="add1price1" placeholder="变更前价格">
                    </div>
                  </div>
                  <div class="row mb-3">
                    <label for="add1price2" class="col-sm-3 col-form-label"
                           style="text-align: center">变更后价格</label>
                    <div class="col-sm-9">
                      <input type="email" class="form-control" id="add1price2" placeholder="变更后价格">
                    </div>
                  </div>
                  <div class="row mb-3">
                    <label for="add1date" class="col-sm-3 col-form-label"
                           style="text-align: center">变更日期</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="add1date" placeholder="变更日期">
                    </div>
                  </div>



                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="myreset()">取消</button>
                  <button type="button" class="btn btn-primary" data-bs-dismiss="modal"
                          onclick="insert()">保存采购价格
                  </button>
                </div>
              </div>
            </div>
          </div>

        </div>

        <div>
          <!--分页-->
          <div id="fenye" style="margin-left: 10px;display: inline-block"></div>

          <!--导出Excel PDF   打印-->
          <div style="display: inline-block; width: 75%;text-align: right">
            <button onclick="toExcel()">导出Excel</button>
            <button onclick="toPdf()">导出PDF</button>
            <button onclick="myPrint()">打印</button>
          </div>
        </div>
      </div>

    </div>
  </div>
  <!--end page wrapper -->


  <!--start overlay-->
  <div class="overlay toggle-icon"></div>
  <!--end overlay-->


  <!--Start Back To Top Button--> <a href="javaScript:;" class="back-to-top"><i class='bx bxs-up-arrow-alt'></i></a>
  <!--End Back To Top Button-->
  <footer class="page-footer">
    <p class="mb-0">Copyright © 2022. All right reserved.</p>
  </footer>
</div>
<!--end wrapper-->


<!--start switcher-->
<!-- display=none 直接注释掉会使js报错-->
<div class="switcher-wrapper" style="display: none;">
  <div class="switcher-btn"><i class='bx bx-cog bx-spin'></i>
  </div>
  <div class="switcher-body">
    <div class="d-flex align-items-center">
      <h5 class="mb-0 text-uppercase">Theme Customizer</h5>
      <button type="button" class="btn-close ms-auto close-switcher" aria-label="Close"></button>
    </div>
    <hr>
    <h6 class="mb-0">Theme Styles</h6>
    <hr>
    <div class="d-flex align-items-center justify-content-between">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="lightmode" checked="">
        <label class="form-check-label" for="lightmode">Light</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="darkmode">
        <label class="form-check-label" for="darkmode">Dark</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="flexRadioDefault" id="semidark">
        <label class="form-check-label" for="semidark">Semi Dark</label>
      </div>
    </div>
    <hr>
    <div class="form-check">
      <input class="form-check-input" type="radio" id="minimaltheme" name="flexRadioDefault">
      <label class="form-check-label" for="minimaltheme">Minimal Theme</label>
    </div>
    <hr>
    <h6 class="mb-0">Header Colors</h6>
    <hr>
    <div class="header-colors-indigators">
      <div class="row row-cols-auto g-3">
        <div class="col">
          <div class="indigator headercolor1" id="headercolor1"></div>
        </div>
        <div class="col">
          <div class="indigator headercolor2" id="headercolor2"></div>
        </div>
        <div class="col">
          <div class="indigator headercolor3" id="headercolor3"></div>
        </div>
        <div class="col">
          <div class="indigator headercolor4" id="headercolor4"></div>
        </div>
        <div class="col">
          <div class="indigator headercolor5" id="headercolor5"></div>
        </div>
        <div class="col">
          <div class="indigator headercolor6" id="headercolor6"></div>
        </div>
        <div class="col">
          <div class="indigator headercolor7" id="headercolor7"></div>
        </div>
        <div class="col">
          <div class="indigator headercolor8" id="headercolor8"></div>
        </div>
      </div>
    </div>
    <hr>
    <h6 class="mb-0">Sidebar Colors</h6>
    <hr>
    <div class="header-colors-indigators">
      <div class="row row-cols-auto g-3">
        <div class="col">
          <div class="indigator sidebarcolor1" id="sidebarcolor1"></div>
        </div>
        <div class="col">
          <div class="indigator sidebarcolor2" id="sidebarcolor2"></div>
        </div>
        <div class="col">
          <div class="indigator sidebarcolor3" id="sidebarcolor3"></div>
        </div>
        <div class="col">
          <div class="indigator sidebarcolor4" id="sidebarcolor4"></div>
        </div>
        <div class="col">
          <div class="indigator sidebarcolor5" id="sidebarcolor5"></div>
        </div>
        <div class="col">
          <div class="indigator sidebarcolor6" id="sidebarcolor6"></div>
        </div>
        <div class="col">
          <div class="indigator sidebarcolor7" id="sidebarcolor7"></div>
        </div>
        <div class="col">
          <div class="indigator sidebarcolor8" id="sidebarcolor8"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--end switcher-->


<!-- Bootstrap JS -->
<script src="/js/bootstrap.bundle.min.js"></script>
<!--plugins-->
<script src="js/jquery.min.js"></script>
<script src="/js/simplebar.min.js"></script>
<script src="/js/metisMenu.min.js"></script>
<script src="/js/perfect-scrollbar.js"></script>
<script src="/js/jquery.dataTables.min.js"></script>
<script src="/js/dataTables.bootstrap5.min.js"></script>
<!--app JS-->
<script src="/js/app.js"></script>
<!--layui-js-->
<script src="/layui/layui.js"></script>
<script src="/js/mine/mine.js"></script>

<script>
  // 数据
  var mydata;
  // 表格数据
  var limit = 14; //默认每页数据条数
  var curr = 1; // 当前页数
  var datasize = 0; //总数据条数

  function loaddata(mydata) {

  }

  selectAll();
  fenye();




  // 初始化
  function selectAll() {
    $.ajax({
      type: "get",
      url: "/buyprice",
      dataType: "json",
      async: false,
      success: function (data) {
        //console.log(data);
        mydata = data.data;
        loaddata(mydata);
        datasize = mydata.length;

        load();
      },
      error: function () {
        console.log("error");
      }
    });
  }

  // 分页功能
  function fenye() {
    layui.use(['laypage', 'layer'], function () {
      var laypage = layui.laypage
              , layer = layui.layer;
      //自定义样式
      laypage.render({
        elem: 'fenye'
        , count: datasize // 总数据条数
        , theme: '#1E9FFF' // 主题颜色
        , limit: limit // 默认每页数据条数
        , limits: [10, 14, 20, 30] // 每页数据条数选项
        , layout: ['limit', 'prev', 'page', 'next'] // 布局
        , jump: function (obj) { // 页面变化
          curr = obj.curr;
          limit = obj.limit;

          load();
        }
      });
    });
  }

  // 查询
  // function search() {
  //     var input_str = $("#search-input").val();
  //     // 没有输入 查询全部
  //     if (input_str == "") {
  //         selectAll();
  //         fenye();
  //     } else { //否则根据输入条件查询
  //         $.ajax({
  //             type: "get",
  //             url: "/store/search",
  //             dataType: "json",
  //             async: false,
  //             data: {
  //                 input: input_str
  //             },
  //             success: function (data) {
  //                 mydata = data;
  //                 loaddata(mydata);
  //                 datasize = data.length;
  //                 load();
  //                 fenye();
  //             },
  //             error: function () {
  //                 console.log("error");
  //             }
  //         });
  //     }
  // }
  // 修改
  function update1(n) {
    $("#id").val(mydata[n].id);
    $("#code").val(mydata[n].code);
    $("#price1").val(mydata[n].price1);
    $("#price2").val(mydata[n].price2);
    $("#date").val(mydata[n].date);
  }
  function update2() {
    var buyprice = {
      id: $("#id").val(),
      code: $("#code").val(),
      price1: $("#price1").val(),
      price2: $("#price2").val(),
      date: $("#date").val()
    };
    if (buyprice.code == "" || buyprice.price1 == "" ) {
      alert("编码和变更前价格输入不能为空");
    } else {
      $.ajax({
        type: "put",
        url: "/buyprice",
        data: JSON.stringify(buyprice),
        contentType: "application/json; charset=utf-8",
        success: function (data) {
          if (data.data) {
            alert("修改成功");
            selectAll();
          } else {
            alert("修改失败");
          }
        },
        error: function () {
          alert("服务器错误");
        }
      });
    }
  };

  // 删除
  function mydelete(id) {
    if (confirm("是否删除此条数据？")) {
      $.ajax({
        type: "delete",
        url: "/buyprice/" + id,
        dataType: "json",
        success: function (data) {
          if (data.data) {
            alert("删除成功");
            selectAll();
          } else {
            alert("删除失败");
          }
        },
        error: function () {
          alert("服务器错误");
        }
      });
    }
  }
  // 加载表格数据
  function load() {
    var str = "";
    for (let i = (curr - 1) * limit; i < curr * limit; i++) {
      if (i != datasize) {
        str = str +
                "<tr>" +
                "<td>" + mydata[i].id + "</td>" +
                "<td>" + mydata[i].code + "</td>" +
                "<td>" + mydata[i].price1 + "</td>" +
                "<td>" + mydata[i].price2 + "</td>" +
                "<td>" + mydata[i].date + "</td>" +
                "<td>" + "<button type=\"button\" class=\"layui-btn layui-btn-warm layui-btn-xs\" data-bs-toggle=\"modal\" data-bs-target=\"#update_div\" onclick='update1(" + i + ")'>" +
                "<i class=\"layui-icon\"></i></button>\n" +
                "  <button type=\"button\" class=\"layui-btn layui-btn-danger layui-btn-xs\" onclick='mydelete(" + mydata[i].id + ")'><i class=\"layui-icon\"></i></button>" + "</td>" +
                "</tr>";
      } else {
        break;
      }
    }
    document.getElementById("buypricefind").innerHTML = str;
  }
</script>

<!--导出数据-->
<script src="js/mine/mine.js"></script>
<script>
  function toExcel() {
    //自定义标题栏
    var title = ['id', '编码', '拼音', '名称', '平台', '店铺类型', '是否分摊增值税', '免分摊截止月份', '备注'];
    //自定义过滤栏（不需要导出的行）
    //var filter=['id','logins'];
    JSONToExcel(mydata, '店铺信息', title)
  }

  function toPdf() {
    layer.msg("功能待实现");
  }

  function myPrint() {
    layer.msg("功能待实现");
  }
</script>

<!--excel导入数据-->
<script>
  function fromexcel() {
    layer.msg("功能待实现");
  }
  // layui.use(['upload', 'element', 'layer'], function () {
  //     var $ = layui.jquery
  //         , upload = layui.upload
  //         , element = layui.element
  //         , layer = layui.layer;
  //
  //     //常规使用
  //     var uploadInst = upload.render({
  //         elem: '#excelUpLoad'
  //         , url: '/store/upload' //上传接口
  //         , accept: 'file'
  //         , exts: 'xls|xlsx|xlsm|xlt|xltx|xltm'
  //         , done: function (res) {
  //             if (res.code == "200") {
  //                 layer.msg(res.msg, {icon: 1});
  //                 selectAll();
  //                 fenye();
  //             } else {
  //                 layer.msg(res.msg, {icon: 2});
  //                 console.log(res.e)
  //             }
  //         }
  //         , error: function () {
  //             layer.msg("上传失败", {icon: 2});
  //         }
  //     });
  // });

  <!--插入界面-->
  function insert() {
    var buyprice = {
      id: $("#add1id").val(),
      code: $("#add1code").val(),
      price1: $("#add1price1").val(),
      price2: $("#add1price2").val(),
      date: $("#add1date").val(),
    };

    $.ajax({
      type: "post",
      url: "/buyprice",
      data: JSON.stringify(buyprice),
      contentType: "application/json; charset=utf-8",
      success: function (data) {
        if (data.data) {
          alert("添加成功");
          // myreset();
          window.location="buyprice.html";
        }
        else {
          alert("添加失败")
        }
      },
      error:function () {
        alert("服务器错误");
      }
    })
  }

  function myreset() {
    $("#add1id").val(""),
            $("#add1code").val(""),
            $("#add1price1").val(""),
            $("#add1price2").val(""),
            $("#add1date").val("")
  }

  <!--excel导入数据-->
  layui.use(['upload', 'element', 'layer'], function () {
    var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;

    //常规使用
    var uploadInst = upload.render({
      elem: '#excelUpLoad'
      , url: '/shops/upload' //上传接口
      , accept: 'file'
      , data:{

      }
      , exts: 'xls|xlsx|xlsm|xlt|xltx|xltm'
      , done: function (res) {
        if (res.code == "200") {
          layer.msg(res.msg, {icon: 1});
          selectAll();
          fenye();
        } else {
          layer.msg(res.msg, {icon: 2});
          console.log(res.e)
        }
      }
      , error: function () {
        layer.msg("上传失败", {icon: 2});
      }
    });
  });

  <!--平台下拉列表-->
  $.ajax({
    type: "get",
    url: "/dicts/shopplatform",
    dataType: "json",
    async: false,
    success: function (data) {
      var names = [data.length];
      var values = [data.length];
      for (let i = 0; i < data.length; i++) {
        names[i] = data[i].value;
        values[i] = data[i].value;
      }
      generateSelect1('platform',names,values);
      generateSelect1('add_platform',names,values);
    },
    error: function () {
      console.log("error");
    }
  });

  $.ajax({
    type: "get",
    url: "/dicts/shoptype",
    dataType: "json",
    async: false,
    success: function (data) {
      var names = [data.length];
      var values = [data.length];
      for (let i = 0; i < data.length; i++) {
        names[i] = data[i].value;
        values[i] = i;
      }
      generateSelect1('type',names,values);
      generateSelect1('add_type',names,values);
    },
    error: function () {
      console.log("error");
    }
  });
</script>

</body>

</html>